
import dayjs from "dayjs";
import Taro from "@tarojs/taro";
import { Picker, View } from "@tarojs/components";

import ByCell from "@/components/ui/ByCell";
import ByButton from "@/components/ui/ByButton";
import Uploader from "@/components/app/Uploader";
import FormInput from "@/components/common/FormInput";
import ByImageGroup from "@/components/ui/ByImageGroup";
import ByPopupBottom, {
  ByPopupBottomEvent,
} from "@/components/ui/ByPopupBottom";

import useForm from "@/hooks/useForm";
import ApiCrm from "@/api/crm";

import type { ConstructionPlanDetail } from "@/types/construction";

type FormModel = {
  constructionId: number;
  constructionPlanId: number;
  /**
   * 工地照片吧
   */
  formConstructionPlanPicList: string[];
  /**
   * 操作类型 0 开工 1 完工
   */
  operationType: number;
  planFinishDate?: string;
  planStartDate?: string;

  /**
   * 工人照片
   */
  workerPics: string[];

  RealStartDate: string
  RealEndDate: string
};

type PopupExtensionProps = {
  planState?: "started" | "unstarted" | "complate";
  source: ConstructionPlanDetail;
  customerName?: string;

  isSwitch?: boolean

  onSuccess?: () => void;
};

export default ({
  customerName,
  planState,

  isSwitch,
  source,
  onCancel,
  onSuccess,
}: PopupExtensionProps & ByPopupBottomEvent) => {

  // 是否是开工
  const isStart = planState == "unstarted"
  const titlePrefix = isStart ? "开工" : "完工";

  const key = isStart ? "RealStartDate" : "RealEndDate"




  const { model, setModel, loading, submit } = useForm<FormModel>(
    ApiCrm.startConstruction,
    {
      defaultModel: {
        // 操作类型 1 开工 2 完工
        operationType: isStart ? 1 : 2,
        constructionId: source.constructionId,
        constructionPlanId: source.constructionPlanId,
        formConstructionPlanPicList: [],
        workerPics: [],

        planStartDate: source.planStartDate,
        planFinishDate: source.planFinishDate,

        [key]: dayjs().format("YYYY-MM-DD")
      },
      rules: {
        formConstructionPlanPicList: {
          type: "array",
          required: true,
          message: "请上传照片",
        },
      },
      onSuccess() {
        Taro.showToast({ title: "操作成功！" });
        onSuccess?.();
      },
    }
  );


  const { workerPics, formConstructionPlanPicList: picList } = model;

  const disabled = !isSwitch

  return (
    <ByPopupBottom title={titlePrefix + "信息"} onCancel={onCancel}>
      <View className="max-h-[70vh] px-4 overflow-y-auto">
        <ByCell vertical label="计划时间">
          {isStart ? model.planStartDate : model.planFinishDate}
        </ByCell>

        <ByCell vertical label="实际时间">
          <View className="flex items-center">
            <Picker mode="date"
              disabled={disabled}
              value={model.planStartDate || ""}
              // @ts-expect-error
              onChange={e => setModel({ [key]: e.detail.value })}
            >
              <FormInput value={model[key]} disabled={true} className={disabled ? 'bg-[#eee]' : ''} />
            </Picker>

            {/* <Text className="px-3">~</Text>
            <Picker mode="date"
              disabled={disabled}
              value={model.planFinishDate || ""}
              start={model.planStartDate}
              onChange={e => setModel({ planFinishDate: e.detail.value })}
            >
              <FormInput value={model.planFinishDate} disabled={true} className={disabled ? 'bg-[#eee]' : ''} />
            </Picker> */}
          </View>
        </ByCell>


        <ByCell vertical label={titlePrefix + "照片"} requierd>
          <ByImageGroup
            showDelete
            urls={picList}
            onChange={(res) => setModel({ formConstructionPlanPicList: res })}
            slotFooter={
              <Uploader
                size={140}
                onSuccess={(res) =>
                  setModel({
                    formConstructionPlanPicList: [...picList, ...res],
                  })
                }
              />
            }
          />
        </ByCell>

        <ByCell vertical label={titlePrefix + "工人照片"}>
          <ByImageGroup
            showDelete
            urls={workerPics}
            onChange={(res) => setModel({ workerPics: res })}
            slotFooter={
              <Uploader
                size={140}
                customerName={customerName}
                onSuccess={(res) =>
                  setModel({ workerPics: [...workerPics, ...res] })
                }
              />
            }
          />
        </ByCell>

        <ByButton
          className="mt-6 mb-3 w-2/3"
          size="large"
          loading={loading}
          onClick={() => submit()}
        >
          提交
        </ByButton>
      </View>
    </ByPopupBottom>
  );
};
